<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Temu跨境电商平台系统设计 - 用户评价与互动机制</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      :root {
        --primary: #2a3f8a;
        --secondary: #4ecdc4;
        --light: #a7e8e2;
        --dark: #1a4545;
        --accent: rgb(251, 119, 1);
        --accent-2: #ff9f43;
        --text-light: #f8f9fa;
        --text-dark: #343a40;
        --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Noto Sans SC", sans-serif;
        background-color: var(--text-light);
        color: var(--text-dark);
        overflow: hidden;
        height: 100vh;
        width: 100vw;
      }

      .slide-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 20px;
        padding: 30px;
        position: relative;
        overflow: hidden;
        background-color: white;
      }

      /* 标题区域 */
      .header-section {
        grid-column: 1;
        grid-row: 1;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        z-index: 2;
      }

      .title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 10px;
        position: relative;
        display: inline-block;
        opacity: 0;
        animation: fadeIn 0.8s ease-out forwards;
      }

      .title::after {
        content: "";
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, var(--secondary), var(--light));
        border-radius: 2px;
      }

      .subtitle {
        font-size: 1.1rem;
        color: var(--text-dark);
        opacity: 0.8;
        margin-top: 10px;
        opacity: 0;
        animation: fadeIn 0.8s ease-out forwards 0.3s;
      }

      .header-content {
        margin-top: 20px;
        opacity: 0;
        animation: fadeIn 0.8s ease-out forwards 0.5s;
        max-width: 800px;
      }

      .description {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 15px;
        color: var(--text-dark);
      }

      /* 特点指标 */
      .metrics {
        display: flex;
        justify-content: center;
        gap: 40px;
        margin-top: 15px;
      }

      .metric-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 120px;
      }

      .metric-value {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--secondary);
        margin-bottom: 4px;
      }

      .metric-label {
        font-size: 0.85rem;
        color: var(--text-dark);
        opacity: 0.8;
      }

      /* 图片区域 - 右上角 */
      .image-section {
        grid-column: 1;
        grid-row: 2;
        position: relative;
        overflow: hidden;
      }

      .image-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          135deg,
          rgba(44, 110, 110, 0.9),
          rgba(78, 205, 196, 0.7)
        );
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
        color: white;
        text-align: center;
      }

      /* 功能特点区域 */
      .features-section {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px;
        position: relative;
        z-index: 1;
      }

      .feature-card {
        background: white;
        border-radius: 8px;
        box-shadow: var(--shadow);
        padding: 20px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateY(20px);
      }

      .feature-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--secondary);
      }

      .feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background-color: rgba(78, 205, 196, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--secondary);
        margin-bottom: 12px;
      }

      .feature-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 8px;
      }

      .feature-desc {
        font-size: 0.85rem;
        line-height: 1.4;
        color: var(--text-dark);
        margin-bottom: 12px;
        flex: 1;
      }

      /* 评价界面模拟 */
      .review-ui {
        margin-top: 12px;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 10px;
        background-color: #f8f9fa;
        font-size: 0.8rem;
      }

      .review-header {
        display: flex;
        align-items: center;
        margin-bottom: 6px;
      }

      .user-avatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--secondary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        margin-right: 6px;
      }

      .rating {
        display: flex;
        margin-left: auto;
      }

      .star {
        color: #ffc107;
        font-size: 0.8rem;
        margin-left: 1px;
      }

      .review-text {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: 6px;
      }

      .review-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.7rem;
        color: #6c757d;
      }

      /* 投票界面模拟 */
      .vote-ui {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
      }

      .vote-button {
        padding: 6px;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        text-align: center;
        font-size: 0.75rem;
        position: relative;
      }

      /* 问答界面模拟 */
      .qa-ui {
        margin-top: 12px;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        overflow: hidden;
        font-size: 0.75rem;
      }

      .question,
      .answer {
        padding: 8px;
      }

      /* 社区互动模拟 */
      .community-ui {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }

      .community-card {
        border: 1px solid #e9ecef;
        border-radius: 4px;
        padding: 8px;
        background-color: #f8f9fa;
        text-align: center;
      }

      .community-title {
        font-size: 0.75rem;
        font-weight: 500;
        margin-bottom: 4px;
        color: var(--primary);
      }

      .community-count {
        font-size: 1rem;
        font-weight: 600;
        color: var(--secondary);
      }

      .community-label {
        font-size: 0.7rem;
        color: #6c757d;
      }

      /* 页脚 */
      .footer {
        position: absolute;
        bottom: 15px;
        right: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 180px;
        z-index: 10;
      }

      .page-number {
        font-size: 0.9rem;
        color: var(--text-dark);
        opacity: 0.7;
      }

      .logo {
        height: 20px;
      }

      /* 装饰元素 */
      .decoration {
        position: absolute;
        opacity: 0.03;
        z-index: 0;
      }

      .circle-1 {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: var(--secondary);
        top: -125px;
        left: -75px;
      }

      .circle-2 {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: var(--primary);
        bottom: -90px;
        right: 8%;
      }

      /* 响应式调整 */
      @media (max-width: 1200px) {
        .features-section {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(4, auto);
        }

        .feature-card {
          min-height: 200px;
        }
      }

      /* 动画效果 */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="slide-container">
      <!-- 装饰元素 -->
      <div class="circle-1 decoration"></div>
      <div class="circle-2 decoration"></div>

      <!-- 标题区域 -->
      <div class="header-section">
        <h1 class="title">APP崩溃与兼容性优化</h1>
        <p class="subtitle">APP CRASH & COMPATIBILITY OPTIMIZATION</p>
        <div class="header-content">
          <p class="description">
            运用数据分析与机器学习技术，构建智能化的崩溃监控与兼容性保障体系，实现APP稳定性提升，为用户提供流畅可靠的使用体验。
          </p>
          <div class="metrics">
            <div class="metric-item">
              <div class="metric-value">98.5%</div>
              <div class="metric-label">崩溃修复率</div>
            </div>
            <div class="metric-item">
              <div class="metric-value">99.9%</div>
              <div class="metric-label">设备兼容率</div>
            </div>
            <div class="metric-item">
              <div class="metric-value">-85%</div>
              <div class="metric-label">崩溃率降低</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图片区域 - 右上角 -->
      <div class="image-section">
        <div class="image-container">
          <img src=".\static\Voting.jpg" alt="APP稳定性监控" />
          <div class="image-overlay">
            <h2 style="font-size: 1.8rem; margin-bottom: 15px">
              智能稳定性保障
            </h2>
            <p style="font-size: 1rem; line-height: 1.5">
              基于AI技术的崩溃预测与兼容性优化，打造稳定可靠的移动应用体验
            </p>
          </div>
        </div>
      </div>

      <!-- 功能特点区域 -->
      <div class="features-section">
        <!-- 崩溃监控与分析 -->
        <div class="feature-card">
          <div class="feature-icon">📊</div>
          <div class="feature-content">
            <h3 class="feature-title">崩溃监控与分析</h3>
            <p class="feature-desc">
              实时收集崩溃日志，通过数据分析技术快速定位问题根源。智能分类崩溃类型，自动生成修复建议，提高问题解决效率。
            </p>
            <div class="review-ui">
              <div class="review-header">
                <div class="user-avatar">C</div>
                <span style="font-size: 0.8rem">崩溃日志分析</span>
                <div class="rating">
                  <div class="star">★</div>
                  <div class="star">★</div>
                  <div class="star">★</div>
                  <div class="star">★</div>
                  <div class="star">★</div>
                </div>
              </div>
              <div class="review-text">
                检测到内存泄漏问题，建议优化图片加载策略，减少内存占用。影响用户数：2.3K，优先级：高
              </div>
              <div class="review-footer">
                <span>2024-03-15</span>
                <div class="helpful-votes">
                  <span>已修复</span>
                  <span class="vote-count">98.5%</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 兼容性预测 -->
        <div class="feature-card">
          <div class="feature-icon">🔮</div>
          <div class="feature-content">
            <h3 class="feature-title">兼容性预测系统</h3>
            <p class="feature-desc">
              利用机器学习算法预测潜在兼容性问题，提前识别风险设备。基于历史数据建立设备特征库，实现智能化的兼容性评估。
            </p>
            <div class="vote-ui">
              <div class="vote-button">低风险</div>
              <div class="vote-button">中风险</div>
              <div class="vote-button active">高风险</div>
              <div class="vote-button">已解决</div>
            </div>
            <div
              style="
                font-size: 0.8rem;
                margin-top: 10px;
                color: #6c757d;
                text-align: center;
              "
            >
              预测准确率：96.8%
            </div>
          </div>
        </div>

        <!-- 实验室测试 -->
        <div class="feature-card">
          <div class="feature-icon">🧪</div>
          <div class="feature-content">
            <h3 class="feature-title">实验室测试环境</h3>
            <p class="feature-desc">
              建立完整的设备测试矩阵，覆盖主流机型与系统版本。自动化测试流程，快速验证API兼容性，确保APP稳定性。
            </p>
            <div class="qa-ui">
              <div class="question">
                <div class="question-header">
                  <div class="question-icon">T</div>
                  <span>测试报告</span>
                </div>
                <div class="question-text">
                  Android 14 API
                  33兼容性测试：通过率99.9%，发现3个潜在问题，已优化解决
                </div>
              </div>
              <div class="answer">
                <div class="answer-header">
                  <div class="answer-icon">R</div>
                  <span>优化建议</span>
                </div>
                <div class="answer-text">
                  建议更新WebView组件，优化后台任务管理，适配新版系统权限机制
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 性能监控 -->
        <div class="feature-card">
          <div class="feature-icon">📈</div>
          <div class="feature-content">
            <h3 class="feature-title">性能监控体系</h3>
            <p class="feature-desc">
              全方位监控APP性能指标，包括启动时间、内存占用、帧率等。建立性能基准，实时预警异常，保障用户体验。
            </p>
            <div class="community-ui">
              <div class="community-card">
                <div class="community-title">启动时间</div>
                <div class="community-count">1.2s</div>
                <div class="community-label">平均</div>
              </div>
              <div class="community-card">
                <div class="community-title">内存占用</div>
                <div class="community-count">85MB</div>
                <div class="community-label">峰值</div>
              </div>
              <div class="community-card">
                <div class="community-title">帧率</div>
                <div class="community-count">60fps</div>
                <div class="community-label">稳定</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 页脚 -->
      <div class="footer">
        <span class="page-number">17 / 20</span>
        <img class="logo" src="images/temu_logo.svg" alt="Temu Logo" />
      </div>
    </div>
  </body>
</html>
